<template>
  <div class="page-wrap">
    <el-table :data="list" style="width: 100%">
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.user_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="密码" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.user_name }}</p>
            <p>密码: {{ scope.row.user_pwd }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.user_pwd }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="primary" plain icon="el-icon-folder-add" @click="addInfo"
        >新增一条记录</el-button
      >
    </div>
    <!-- 弹出对话框 -->
    <el-dialog
      :title="`用户管理-${editor.isMode ? '新增' : '修改'}`"
      :visible.sync="editor.isEditor"
      width="40%"
      :modal="false"
    >
      <el-form
        ref="ruleForm"
        :model="editor.mode"
        label-width="80px"
        :rules="editor.rules"
      >
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="editor.mode.user_name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_pwd">
          <el-input v-model="editor.mode.user_pwd"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="saveInfo">保存</el-button>
        <el-button @click="editor.isEditor = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      list: [
      ],
      editor: {
        isEditor: false,
        isMode: true,
        mode: {
          user_name: "",
          user_pwd: "",
        },
        rules: {
          user_name: [
            { required: true, message: "请输入有效的用户名", trigger: "blur" },
            {
              min: 3,
              max: 5,
              message: "长度在 3 到 5 个字符",
              trigger: "blur",
            },
          ],
          user_pwd: [
            { required: true, message: "请输入密码", trigger: "blur" },
            {
              min: 5,
              max: 10,
              message: "长度在 5 到 10 个字符",
              trigger: "blur",
            },
          ],
        },
      },
      editorIndex: -1,
    };
  },
  methods: {
    initData() {
      // 清除验证
      if(this.$refs.ruleForm) this.$refs.ruleForm.resetFields();
      
    },
    addInfo() {
      this.initData();
      // 新增按钮
      // 改为新增状态
      this.editor.isMode = true;
      // 打开对话框
      this.editor.isEditor = true;
    },
    handleEdit(index, row) {
      this.initData();
      // 编辑
      this.editor.isMode = false;
      // 要编辑的地址索引
      this.editorIndex = index;
      this.editor.mode = JSON.parse(JSON.stringify(this.list[index]));
      this.editor.isEditor = true;
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.list.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    saveInfo() {
      this.$refs.ruleForm
        .validate()
        .then((res) => {
          console.log("校验成功");
          if (this.editor.isMode) {
            // 新增操作
            this.list.push(JSON.parse(JSON.stringify(this.editor.mode)));
            this.$message({
              type: "success",
              message: "新增成功!",
            });
          } else {
            // 修改操作
            this.list.splice(this.editorIndex, 1, JSON.parse(JSON.stringify(this.editor.mode)));
            this.$message({
              type: "success",
              message: "修改成功!",
            });
          }
          this.editor.isEditor = false;
        })
        .catch((err) => {
          console.log("校验失败");
        });
    },
  },
  async created() {
    let list = await this.$http({
      
    })
  },
};
</script>

<style scoped lang="stylus">
.page-wrap
  height 100%
</style>
